<template>
  <div>
    <!-- 签到页面 -->
    <i class="van-icon van-icon-arrow-left" @click="left"></i>
    <!-- 顶部 -->
    <div class="top">
      <p>您的可用积分为</p>
      <b>0</b>
    </div>
    <h1></h1>

    <!--  -->
    <div class="btn">
      <button @click="$router.push('/login')">签到</button>
    </div>

    <!-- 底部 -->
    <ul class="sign">
      <li>
        <img src="@/assets/image/sign-1.jpg" alt="" />
        <div>
          <p>消费购物</p>
          <p>购物完成，确认收货后立返积分</p>
        </div>
        <button @click="$router.push('/home')">去购物</button>
      </li>
      <li>
        <img src="@/assets/image/sign-2.jpg" alt="" />
        <div>
          <p>积分兑换</p>
          <p>积分兑好礼，20积分即可兑换礼券</p>
        </div>
        <button @click="$router.push('/gift')">去兑换</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  mounted() {},
  methods: {
    left() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.van-icon {
  font-size: 0.4rem;
  position: fixed;
  top: 0.2rem;
  left: 0.2rem;
}
// 顶部
.top {
  box-sizing: border-box;
  width: 100%;
  padding-top: 1.9rem;
  // height: 3.4598rem; //172.99
  height: 4.471rem;  //223.55
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f1ead8),
    to(#fefbf2)
  );
  text-align: center;
  p {
    font-size: 0.28rem;
    color: #aeaeab;
  }
  b {
    font-size: 0.46rem; //23
    color: #b3a078;
  }
}
h1 {
  width: 100%;
  height: 1.298rem; //64.9
  background: #e8e1cf;
}

.btn {
  width: 100%;
  text-align: center;
  button {
    background: #b3a078;
    border: 0;
    color: #fff;
    border-radius: 0.5rem;
    font-size: 0.28rem;
    display: inline-block;
    width: 3.173rem; //158.65
    height: 0.6922rem; //34.61
  }
}

// 底部
.sign {
  padding: 0.2rem;
  > li {
    width: 100%;
    height: 1.5866rem; //79.33
    background: #f4ebe2;
    border-radius: 0.1rem;
    margin-top: 0.4rem;
    font-size: 0.23rem; //11.5
    display: flex;
    line-height: 0.6rem;
    img {
      height: 100%;
    }
    div {
      padding-top: 0.4rem;
      width: 4.5rem;
    }
    button {
      background: #e1b68c;
      color: white;
      border: 0;
      display: inline-block;
      height: .4616rem; //23.08
      line-height: .4616rem;
      border-radius: 0.1rem;
      margin-top: 0.7rem;
    }
  }
  li:nth-child(1) {
    color: #e1b68c;
  }
  li:nth-child(2) {
    color: #b3a078;
  }
}
</style>
